<template>
    <div>
        <div class="Dialog" v-show="data[0]">
            <span class="iconfont cha" @click="show()" >&#xe61a;</span>
            <slot name='title'></slot>
            <div class="zf-box">
                <div class="fund" v-if="data[1]=='fund'">
                    <input type="text" v-bind:value="value.title"  v-on:input="valueChange" placeholder="请输入新建歌单标题">
                    <p>
                        <input type="checkbox" id="checkbox" style=" display: none;">
                        <label for="checkbox" class="cs-checkbox"></label>
                        <label for="checkbox" class="title">设置为隐私歌单</label>
                    </p>
                    <button class="fund-button" :style="{background:bgButton}">创建</button>
                </div>
            </div> 
        </div>
    </div>
</template>
<script>
export default {
   data() {
    return {
        num:140,
        contentFrind:[],
        bgButton:'',
        value:{
            title:''
        }
        // isShowZf:this.data[2]
  
    }
   },
   props:{
     data:{
            typeof:Object || Array,
            default:_=>{
                return{}
            }
        },
   },
   watch:{
    // value:{
    //     handler(newValue,oldValue){
    //         this.value.title =  newValue.title
    //          console.log('哈哈'+this.value.title)
    //     },
    //     deep:true
    // }
   },
   mounted() {
   
   },
   methods:{
    show(){
        this.$emit("fund", !this.data[0])

    },
  valueChange(event){
                
                    this.value.title=event.target.value
                if(this.value.title!==''){
                    this.bgButton = '#EC4141'
                }
   }
   }  
}
</script>
<style lang="less" scoped>
    .iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
@font-face {
  font-family: 'iconfont';
  src: url('../../public/font_home/font-icon4/iconfont.ttf?t=1659187482449') format('truetype');
}
    div,span,ul,li,img{
    font-size: 0;
}
.Dialog{
    z-index: 999;
    box-shadow: 0px 0px 7px rgb(0 0 0 / 9%);
   
    background: white;
    border-radius: 20px;
    width: 587px;
   
    text-align: center;
   position:fixed;
   top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    span{

        cursor: pointer;
          text-align: right;
        margin: 6px 0;
    }
    .cha{
        font-size: 20px;
        color: black;
        display: block;
        margin: 18px 26px 0 0;
    }
    .cha:hover{
        color: #9F9F9F;
    }
   span[name='title']{
    font-size: 20px;
    font-weight: 800;
     color: black;
   }

   .zf-box{
    margin-top: 20px;
    height:  fit-content ;
    box-sizing: border-box;
    position: relative;
        padding: 0 20px;
  .fund{
    input{
        outline:none;
        height: 35px;
        width: 100%;
        border: 1px solid #E1E1E1;
        padding: 0 10px;
        font-size: 15px;
    }
    /* Safari，Chrome WebKit browsers */ 
	input::-webkit-input-placeholder {
		color: #CCCCCC;
        font-size: 15px;
	}
	/* 火狐 Mozilla Firefox 4 to 18 */ 
	input:-moz-placeholder {
		color: #CCCCCC;
        font-size: 15px;
	}
	/* 火狐 Mozilla Firefox 19+ */ 
	input::-moz-placeholder {
		color: #CCCCCC;
        font-size: 15px;
	}
    p{
      /*复选框*/
      display: flex;
      align-items: center;
    margin: 10px 0;
.cs-checkbox {

  display: inline-block;
  width: 20px; height: 20px;
  border: 2px solid transparent;
  border-radius: 4px;
  color: gray;
  box-shadow: inset 0 0 0 1px;
  background-color: #fff;
  box-sizing: border-box;
  vertical-align: -.5ex;
  user-select: none;
  transition: color .2s;
  overflow: hidden; 

}
.title{
    font-size: 15px;
    margin-left: 5px;
    color: #333333;
}
:focus + .cs-checkbox,
:checked + .cs-checkbox {
  color: deepskyblue; 
}
:checked + .cs-checkbox::before {
  content: "";
  display: block;
  width: 8px; height: 3px;
  border-left: 2px solid;
  border-bottom: 2px solid;
  margin: 4px auto 0;
  -ms-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
:disabled + .cs-checkbox {
  background-color: #f5f5f5;
  opacity: .4; 
}

   }
   .zf-box:after { clear:both;content:'';display:block;width:0;height:0;visibility:hidden; }
   .zf-button{
    float: right;
    outline: none;
    font-size: 15px;
    background: #EC4141;
    border: none;
    padding: 10px 38px;
    color: white;
    border-radius: 17px;
    letter-spacing: 4px;
    margin-top: 38px;
    
   }
    .fund-box:after { clear:both;content:'';display:block;width:0;height:0;visibility:hidden; }
   .fund-button{
      
    outline: none;
    cursor: pointer;
    font-size: 18px;
    background: #F6A0A0;
    border: none;
    padding: 8px 35px;
    color: white;
    border-radius: 18px;
    letter-spacing: 4px;
    /* margin-top: 38px; */
    margin: 30px auto;
    
   }
  }


  }
}
   
</style>